<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="OrgSync">
    <title>登录 - OrgSync</title>
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/logo192.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/libs/bootstrap@5.3.3/css/bootstrap.min.css">
    <style>
        html, body {
            height: 100%;
        }

        body {
            background-color: #f5f5f5;
            position: relative;
        }

        .login-box {
            background-color: #ffffff;
            box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.3);
            max-width: 1000px;
            min-width: 320px !important;
            position: absolute;
            top: 38%;
            left: 50%;
            transform: translate(-50%, -38%);
            user-select: none;
        }

        .side-box {
            align-items: flex-start;
            background: linear-gradient(0deg, #041e5e 0%, #00033b 100%);
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            padding: 0;
            position: relative;
        }

        .side-box::before {
            background: url('/images/login-background.jpg') no-repeat right center;
            background-size: cover;
            display: block;
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .side-box > img,
        .side-box > div {
            position: absolute;
        }

        .side-box > img {
            bottom: 20px;
            left: 16px;
            width: 256px;
        }

        .side-box .logo {
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            top: 24px;
            right: 24px;
            width: 160px;
            height: 50px;
        }

        .side-box .logo img {
            width: 100%;
        }

        .form-sign-in {
            margin: 64px auto 48px;
            max-width: 340px;
            position: relative;
            width: 100%;
        }

        .form-sign-in a {
            text-decoration: none !important;
        }

        .form-sign-in .form-header {
            align-items: flex-end;
            display: flex;
            justify-content: space-between;
        }

        .form-sign-in .form-header h3 {
            line-height: 32px;
        }

        .form-sign-in .form-header h3,
        .form-sign-in .form-header span {
            margin-bottom: 0;
        }

        .form-sign-in .form-floating:focus-within {
            z-index: 2;
        }

        .form-sign-in input[type="text"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-sign-in input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .form-floating > .form-control-plaintext~label::after,
        .form-floating > .form-control:focus~label::after,
        .form-floating > .form-control:not(:placeholder-shown)~label::after,
        .form-floating > .form-select~label::after {
            display: none;
        }

        .alert {
            box-shadow: rgba(33, 37, 41, 0.15) 0px 8px 16px 0px;
            max-width: 400px;
            min-width: 320px;
            position: absolute;
            left: 50%;
            text-align: center;
            transform: translate(-50%, 0);
            user-select: none;
            z-index: 3;
        }

        @media (max-width: 1199.98px) {
            .login-box {
                box-shadow: none;
            }
        }

        @media (max-width: 767.98px) {
            body {
                background-color: #ffffff;
            }
            .login-box {
                top: 0;
                transform: translate(-50%, 0);
            }
            .side-box {
                height: 85vw;
            }
        }

        @media (max-width: 429.98px) {
            .login-box {
                top: 0;
                left: 0;
                transform: none;
            }
            .side-box {
                display: none;
            }
        }
    </style>
</head>
<body>
<div class="container login-box">
    <div class="row">
        <div class="col-md-6 ms-md-auto side-box">
            <img src="/images/organization.png" alt="organization">
            <div class="logo">
                <img src="/images/logo.png" alt="logo">
            </div>
        </div>
        <div class="col-md-6 ms-md-auto">
            <div class="form-sign-in">
                <form method="post" action="/sign_in" novalidate class="needs-validation">
                    <div class="form-header mb-4">
                        <h3>登录</h3>
                        <span class="text-muted">
                                没有账号？
                                <a href="/sign_up" class="link-primary">点此注册</a>
                            </span>
                    </div>
                    <input type="hidden" th:name="${csrfTokenName}" th:value="${csrfTokenValue}">
                    <div class="form-floating has-validation">
                        <input id="username" name="username" type="text" placeholder="用户名 / 手机" required class="form-control">
                        <label for="username">用户名 / 手机</label>
                    </div>
                    <div class="form-floating has-validation">
                        <input id="password" name="password" type="password" placeholder="密码" required class="form-control">
                        <label for="password">密码</label>
                    </div>
                    <button type="submit" class="btn btn-lg btn-primary w-100 mt-3">登录</button>
                    <p class="text-muted text-center mt-4">
                        已有账号，
                        <a href="/reset_password" class="link-primary">忘记密码？</a>
                    </p>
                    <p class="text-secondary text-center mt-5 mb-0">© OrgSync 2024</p>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:if="${loginError}" class="alert alert-danger alert-dismissible fade show">
    <span>[[${errorMessage}]]</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<script src="/libs/bootstrap@5.3.3/js/bootstrap.bundle.min.js"></script>

<script>
        var form = document.querySelector('form.needs-validation');
        var button = document.querySelector('.alert .btn-close');
        form.addEventListener('submit', function (event) {
            if (button) {
                button.click();
            }
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            } else {
                document.querySelector('form .btn-primary').disabled = true;
            }
            form.classList.add('was-validated');
        });
        var newUserData = localStorage.getItem('NewUser');
        if (newUserData) {
            var newUser = JSON.parse(newUserData);
            if (newUser.expiry >= new Date().getTime()) {
                document.querySelector('form input[name="username"]').value = newUser.username;
            }
        }
    </script>
</body>
</html>
